/*
*   @Author: 1296
*   @Date: 2025-03-22
*   @Description: 我的资料
*/

<template>
  <div class="style-selector">
    <h3 class="selector-title">{{ $t('theme') }}</h3>
    <div
        v-for="style in styles"
        :key="style.id"
        class="style-option"
    >
      <input
          type="radio"
          :id="style.id"
          v-model="selectedStyle"
          :value="style.id"
      >
      <label :for="style.id" :style="{ background: style.background }"></label>
    </div>
  </div>

  <div
      class="my-profile"
      :style="{ background: currentBackground }"
  >
    <h2>{{ $t('ProfileCard') }}</h2>
    <div class="share-button">
      <share username=""/>
    </div>
    <div class="avatar">
      <img :src="avatarSrc" alt="User Avatar" @error="setDefaultAvatar" />
    </div>
    <div class="user-info">
      <p><strong>{{ $t('username') }}:</strong> {{ username }}</p>
      <p><strong>{{ $t('gender') }}:</strong> {{ genderText || $t('notProvided') }}</p>
      <p><strong>{{ $t('email') }}:</strong> {{ email || $t('notProvided') }}</p>
      <p><strong>{{ $t('phone') }}:</strong> {{ phone || $t('notProvided') }}</p>
      <p><strong>{{ $t('jobCode') }}:</strong> {{ jobCode }}</p>
      <p><strong>{{ $t('institute') }}:</strong> {{ institute || $t('notProvided') }}</p>
      <!-- 仅学生显示专业与班级 -->
      <p v-if="isStudent"><strong>{{ $t('major') }}:</strong> {{ major || $t('notProvided') }}</p>
      <p v-if="isStudent"><strong>{{ $t('className') }}:</strong> {{ className || $t('notProvided') }}</p>
    </div>
  </div>
</template>


<script>
import { mapGetters } from 'vuex'
import defaultAvatar from '@/assets/guest.jpg'
import share from "@/components/Share.vue";

export default {
  name: 'MyProfile',
  components: {
    share
  },
  data() {
    return {
      selectedStyle: 'style1',
      styles: [
        {
          id: 'style1',
          background: '#FFFFFF'
        },
        {
          id: 'style2',
          background: 'linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)'
        },
        {
          id: 'style3',
          background: 'linear-gradient(145deg, #84fab0 0%, #8fd3f4 100%)'
        },
        {
          id: 'style4',
          background: 'linear-gradient(150deg, #ff9a9e 0%, #fecfef 100%)'
        }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'username',
      'email',
      'role',
      'phone',
      'token',
      'avatar',
      'gender',
      'institute',
      'major',
      'className',
      'jobCode'
    ]),
    currentBackground() {
      const selected = this.styles.find(s => s.id === this.selectedStyle)
      return selected ? selected.background : ''
    },
    // // 根据角色显示文字
    // roleText() {
    //   switch (this.role) {
    //     case '0':
    //     case 0:
    //       return this.$t('student')
    //     case '1':
    //     case 1:
    //       return this.$t('teacher')
    //     default:
    //       return this.$t('unauthorized')
    //   }
    // },
    genderText() {
      switch (this.gender) {
        case '0':
        case 0:
          return this.$t('male')
        case '1':
        case 1:
          return this.$t('female')
        default:
          return this.$t('notProvided')
      }
    },
    // 判断是否为学生
    isStudent() {
      return this.role === '0' || this.role === 0
    },
    // 如果 avatar 存在则返回其 data URL，否则使用默认头像
    avatarSrc() {
      if (this.avatar) {
        // base64含 data:image/png;base64, 前缀
        return this.avatar.startsWith('data:image')
            ? this.avatar
            : `${this.avatar}`
      }
      // 默认头像
      return defaultAvatar
    }
  },
  methods: {
    // 设置默认头像
    setDefaultAvatar(event) {
      event.target.src = defaultAvatar
    }
  },
  mounted() {
    // console.log('Email value:', this.email);
    // console.log('Type of email:', typeof this.email);
  }
}
</script>


<style scoped>
.my-profile {
  position: relative;
  padding: 2rem;
  max-width: 800px;
  margin: 20px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.5s ease;
}

h2 {
  color: #2c3e50;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f0f2f5;
}

.avatar {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
}

.avatar img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e8e8e8;
  transition: transform 0.3s ease;
}

.avatar img:hover {
  transform: scale(1.05);
}

.user-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  padding: 1.5rem;
  background: transparent;
  border-radius: 8px;
  border: 2px solid rgba(255, 239, 239, 0.4);
}

.user-info p {
  margin: 0;
  padding: 0.8rem 1.2rem;
  background: transparent;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.user-info p:hover {
  transform: scale(1.05);
  z-index: 1;
}

.user-info strong {
  color: #34495e;
  font-weight: 600;
  margin-right: 1rem;
}

.user-info p > span {
  color: #7f8c8d;
  text-align: right;
  flex: 1;
}

@media (max-width: 768px) {
  .account-management {
    padding: 1rem;
    margin: 1rem;
  }

  .user-info {
    grid-template-columns: 1fr;
  }

  .user-info p {
    flex-direction: column;
    align-items: flex-start;
  }

  .user-info strong {
    margin-bottom: 0.5rem;
  }
}

.share-button {
  position: absolute;
  top: 30px;
  right: 40px;
  z-index: 2;
}

.not-provided {
  color: #95a5a6;
  font-style: italic;
}

.style-selector {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.9);
  padding: calc(20 / 1080 * 100vh) calc(15 / 1920 * 100vw);
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  z-index: 1000;
}

.selector-title {
  color: #2c3e50;
  font-size: 1rem;
  text-align: center;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f2f5;
}

.style-option {
  margin: 12px 0;
}

.style-option input[type="radio"] {
  display: none;
}

.style-option label {
  display: block;
  width: clamp(30px, calc(40 / 1920 * 100vw), 40px);
  height: clamp(30px, calc(40 / 1920 * 100vw), 40px);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s;
  border: 2px solid #d6d6d6;
}

.style-option input:checked + label {
  transform: scale(1.2);
  border-color: #2c3e50;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
</style>